import React, { PureComponent } from 'react'
import { connect } from '@umijs/max'
import Tools from '@/utils/Tools'
import styles from './index.less'

const calcStatus = (status) => {
  switch (status) {
    case 1:
      return <span className={styles.status} title="未运行">未运行</span>
    case 2:
      return <span className={styles.status} title="运行中">运行中</span>
    case 3:
      return <span className={`${styles.status} ${styles.success}`} title="成功">成功</span>
    case 4:
      return <span className={`${styles.status} ${styles.error}`} title="失败">失败</span>
    case 5:
      return <span className={styles.status} title="停止">停止</span>
    case 6:
      return <span className={`${styles.status} ${styles.error}`} title="部分失败">部分失败</span>
    default:
      return '-'
  }
}

@connect(({ operationDetail }) => ({ ...operationDetail }))
class InfoShow extends PureComponent {
  componentWillUnmount() {
    this.props.dispatch({
      type: 'operationDetail/clearNodeInfoData',
    })
  }

  render() {
    const { nodeInfoData } = this.props
    const { nodeType } = nodeInfoData || {}
    const calcCycle = ['月', '周', '天', '小时', '分钟'][nodeInfoData?.cycle] || '-'
    const calcIsDependent = ['不依赖上一调度周期', '等待上一周期结束再运行'][nodeInfoData?.cycleDependency] || '-'

    return (
      <div className={styles.info_show}>
        {
          // sql
          nodeType === 13 && (
            <>
              <div className={styles.item}>
                <div className={styles.left}>
                  <div className={styles.title}>输入表</div>
                  {
                    nodeInfoData?.offlineData?.map(item => (
                      <div key={item?.sourceTable} className={styles.table_name} title={item?.sourceTable}>{item?.sourceTable}</div>
                    ))
                  }
                </div>
                <i className="iconfont-colour3 icon-shuru" />
              </div>
              <div className={styles.item}>
                <div className={styles.left}>
                  <div className={styles.title}>输出表</div>
                  {
                    nodeInfoData?.offlineData?.map(item => (
                      <div key={item?.sourceTable} className={styles.table_name} title={item?.targetTable}>{item?.targetTable}</div>
                    ))
                  }
                </div>
                <i className="iconfont-colour3 icon-shuchu" />
              </div>
            </>
          )
        }
        {
          // 离线同步
          nodeType === 20 && (
            <>
              <div className={styles.item}>
                <div className={styles.left}>
                  <div className={styles.title}>输入表</div>
                  {/* 后端说 目前只有一个 输入、输出表 */}
                  <div className={styles.table_name} title={nodeInfoData.sourceTable}>{nodeInfoData.sourceTable}</div>
                </div>
                <i className="iconfont-colour3 icon-shuru" />
              </div>
              <div className={styles.item}>
                <div className={styles.left}>
                  <div className={styles.title}>输出表</div>
                  <div className={styles.table_name} title={nodeInfoData.targetTable}>{nodeInfoData.targetTable}</div>
                </div>
                <i className="iconfont-colour3 icon-shuchu" />
              </div>
              <div className={styles.item_status}>
                任务状态 {calcStatus(nodeInfoData?.jobStatus)}
              </div>
              <div className={styles.item_total}>
                <div className={styles.left}>
                  成功数
                  <span className={styles.num}>{nodeInfoData?.successCount}</span>
                </div>
                <i className="iconfont-colour2 icon-chenggong_1" />
              </div>
              <div className={styles.item_total}>
                <div className={styles.left}>
                  失败数
                  <span className={styles.num}>{nodeInfoData?.failCount}</span>
                </div>
                <i className="iconfont-colour2 icon-shibai_1" />
              </div>
            </>
          )
        }
        {
          // 数据质量，后端暂时没有开发
          nodeType === 22 && (
            <>
              <div className={styles.item_btn}>
                <div className={styles.btn}><i className="iconfont icon-chakan" /> <span>报告预览</span></div>
                <div className={styles.btn}><i className="iconfont icon-xiazai" /> <span>报告下载</span></div>
              </div>
              <div className={styles.item_info}>
                <span className={styles.title}>监控信息</span>
                <ul className={styles.list}>
                  <li>
                    <span className={styles.column}>监控数据表：</span>
                    <span className={styles.cont} title="">后端暂未开发</span>
                  </li>
                  <li>
                    <span className={styles.column}>监控数据字段：</span>
                    <span className={styles.cont}>后端暂未开发</span>
                  </li>
                  <li>
                    <span className={styles.column}>规则类型：</span>
                    <span className={styles.cont}>后端暂未开发</span>
                  </li>
                  <li>
                    <span className={styles.column}>监控类型：</span>
                    <span className={styles.cont}>后端暂未开发</span>
                  </li>
                  <li>
                    <span className={styles.column}>约束值：</span>
                    <span className={styles.cont}>后端暂未开发</span>
                  </li>
                  <li>
                    <span className={styles.column}>强弱规则：</span>
                    <span className={styles.cont}>后端暂未开发</span>
                  </li>
                </ul>
              </div>
              <div className={styles.item_info}>
                <span className={styles.title}>监控结果</span>
                <ul className={styles.list}>
                  <li>
                    <span className={styles.column}>状态：</span>
                    <span className={styles.cont} title="xxxx">检测正常</span>
                  </li>
                  <li>
                    <span className={styles.column}>异常原因：</span>
                    <span className={styles.cont}>我是一个表名称</span>
                  </li>
                </ul>
              </div>
            </>
          )
        }
        {
          // 开始节点
          nodeType === 12 && (
            <>
              <div className={styles.item_info}>
                <span className={styles.title}>生效日期</span>
                <ul className={styles.list}>
                  <li>
                    <span className={styles.column}>开始时间：</span>
                    <span className={styles.cont} title={nodeInfoData?.effectiveDateStart || '-'}>{nodeInfoData?.effectiveDateStart || '-'}</span>
                  </li>
                  <li>
                    <span className={styles.column}>结束时间：</span>
                    <span className={styles.cont} title={nodeInfoData?.effectiveDateEnd || '-'}>{nodeInfoData?.effectiveDateEnd || '-'}</span>
                  </li>
                </ul>
              </div>
              <div className={styles.item_info}>
                <span className={styles.title}>调度周期</span>
                <ul className={styles.list}>
                  <li>
                    <span className={styles.column}>调度周期：</span>
                    <span className={styles.cont}>{calcCycle}</span>
                  </li>
                  <li>
                    <span className={styles.column}>开始时间：</span>
                    <span className={styles.cont}>{Tools.addZero(nodeInfoData?.startTimeHour)}:{Tools.addZero(nodeInfoData?.startTimeMin)}</span>
                  </li>
                  <li>
                    <span className={styles.column}>结束时间：</span>
                    <span className={styles.cont}>{Tools.addZero(nodeInfoData?.endTimeHour)}:{Tools.addZero(nodeInfoData?.endTimeMin)}</span>
                  </li>
                  <li>
                    <span className={styles.column}>时间间隔：</span>
                    <span className={styles.cont}>{nodeInfoData?.execPoint || '-'}{calcCycle}</span>
                  </li>
                </ul>
              </div>
              <div className={styles.item_info}>
                <span className={styles.title}>任务间依赖</span>
                <ul className={styles.list}>
                  <li>
                    <span className={styles.column}>跨周期依赖：</span>
                    <span className={styles.cont} title={calcIsDependent}>{calcIsDependent}</span>
                  </li>
                </ul>
              </div>
            </>
          )
        }
      </div>
    )
  }
}

export default InfoShow
